<template>
    <div>
    	<div class="graybg"></div>
		<div class="banner">
			<div class="header" >
				<div class="header_left back" onclick="javascript:history.back(-1)">
					<i class="iconfont baiColor">&#xe612;</i>
				</div>
				<div class="header_right dots" @click="share">
					<i class="iconfont baiColor">&#xe72e;</i>
				</div>
			</div>
			<!--轮播图-->
			<swiper :options="swiperOption"  ref="mySwiper" style="height:184px;">  
		        <swiper-slide v-for="(banner,index) in banners" :key="index">
		        	<img :src="imgURL+banner"/>
		        </swiper-slide>
		        <div class="swiper-pagination" slot="pagination"></div>  
		  </swiper>
		</div>
		<div class="center">
			<div class="content">
				<h3>{{infos.stage}}</h3>
				<p class="price">￥{{infos.price | price2}}</p>
				<!--<h2> <span></span> 精选视频</h2>
				<p class="detail">{{infos.audios}}</p>-->
			</div>
			<!--<div class="detailsimg _width">
				<img src="../assets/huiyuan2.png"/>
			</div>-->
			<div class="quanyi">
				<h2> <span></span> 会员权益</h2>
				<div class="quanyi_main marginAuto">
					<p v-text="infos.audios"></p>
				</div>
			</div>
		</div>
		<!--暂放先调到支付成功页面-->
		<router-link :to="{name:'hiuyuanbuy',params:{buyID:member_id}}">
			<div class="purchase_button button baiColor _width">立即购买</div>
		</router-link>
		<!--分享弹窗-->
		<div class="keepOut" :class="{sharedata:shareshow}"></div>
		<div class="transferBlock" :class="{sharedata:shareshow}">
			<div class="transferBlock_header">
				<span>分享到</span>
			</div>
			<div class="transferBlock_main _width">
				<div class="transferBlock_each">
					<a class="jiathis_button_cqq">
					<h5><i class="iconfont">&#xe605;</i></h5>
					<p>QQ</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_qzone">
					<h5><i class="iconfont">&#xe62e;</i></h5>
					<p>QQ空间</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_weixin">
					<h5><i class="iconfont">&#xe660;</i></h5>
					<p>朋友圈</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_copy">
					<h5><i class="iconfont">&#xe66d;</i></h5>
					<p>复制链接</p>
					</a>
				</div>
			</div>
			<div class="close button baiColor" @click="close">
				<span>取消分享</span>
			</div>
		</div>
    </div>

</template>


<script>
	import swipers from '../css/swiper-3.4.2.min.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
    export default{
    	 components: {
    	 	swiper,
			swiperSlide
		 },
        data(){
            return {
            	imgURL:this.imgURL,
            	//控制分享显示隐藏
				shareshow:false,	//分享
				member_id:"",	//购买id
				bank_id:"a",	//进入订单页面不需要银行卡
				infos:{
					stage:'',//店主星级别
					price:'00.00',//钱数
					audios:'',//会员权益
				},
				banners:[],
				//轮播部分
				swiperOption: {
					notNextTick: true, 
	                pagination: '.swiper-pagination',  
	                slidesPerView: 'auto',  
	                centeredSlides: true,  
	                paginationClickable: true,
	                spaceBetween: 30,
	                
					onSlideChangeEnd: swiper => {  //回调方法  
	                    this.page = swiper.realIndex+1;  
	                    this.index = swiper.realIndex;  
	               	}
				},
			
            }
        },
       
		mounted:function(){
			let _this = this;
			var info = window.localStorage.data;
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			var params = new URLSearchParams();
			params.append('token', info);
			params.append('id', id);
			this.$axios({
			   url:"Home/User/shop_member_xq",
				method:"post",
				data:params
			 }).then(function(res){
			 	console.log(res.data)
			   	var datas = res.data;
			   	_this.infos.stage = datas.data.member_name;
			   	_this.infos.price = datas.data.member_price;
			   	_this.infos.audios = datas.data.member_content;
			   	_this.member_id = datas.data.member_id;
			   	_this.banners = datas.data.member_image;
			}).catch(function(err){
				console.log(err)		
			})
        this.init();
		},
		methods:{
			//			分享部分
			init: function () {
			 	var _this= this;
			 	let url = 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js';
		        let script = document.createElement('script');
		        script.setAttribute('src','http://v3.jiathis.com/code/jia.js');
		        document.getElementsByTagName('head')[0].appendChild(script);
		  	},
			//打开分享
			share(){
				this.shareshow = true;
			},
//			取消分享
			close(){
				this.shareshow = false;
			},
		},
		//局部过滤器
		filters:{
        //{{vue | 方法名}}
        //通过return 返回值，将修改好的新值，返回并显示在页面中
        price2:function(value){
          	return parseFloat(value).toFixed(2);
          }
        }
    }

</script>

<style scoped="scoped">
@import "../css/public.css";
.header{
	position:absolute;
}
.center{
	width: 95%;
	margin: 5px auto;
	background: #fff;
}
ol{
	padding-left: 10px;
}
.dots{
	width: 22px !important;
	color: #fff;
	background: #000;
	opacity: 0.6;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
}
.dots i{
	margin: auto;
}
.banner .back{
	color: #fff;
	background: #000;
	opacity: 0.6;
	border-radius: 50%;
	width: 22px !important;
	height: 22px;
	display: flex;
}
.banner .back i{
	margin: auto;
}
.center .content{
	padding: 15px 10px;
}
.center .content > h3{
	color: #323232;
	font-size: 15px;
}
.center .content .price{
	color: #F3961F;
	font-size: 18px;
	padding: 10px 0;
}
.center .content .detail{
	color: #666;
	font-size: 12px;
	line-height: 18px;
}
.detailsimg{
	height: 159px;
}
.detailsimg img{
	width: 100%;
	height: 100%;
}
.center > img{
	height: 160px;
	width: 100%;
}
	.center h2 {
		color: #333;
		font-size: 15px;
		margin: 10px 0;
	}
	
	.center h2 span {
		border: solid 1px #F3961F;
		border-radius: 2.5px;
		background: #F3961F;
		margin-right: 5px;
	}
	.quanyi{
		padding: 15px 10px;
	}
	.quanyi ol li{
		color: #666;
		font-size: 12px;
		line-height: 18px;
	}
.purchase_button{
	position: fixed;
	bottom: 0;
	background: #F3961F;
	height: 30px;
	line-height: 28px;
	font-size: 18px;
	border-radius:0;
}
/*弹窗*/
	.header{
		z-index: 100;
	}
	.keepOut{
		top: 0;
		z-index: 101;
	}
	.sharedata{
		display: block !important;
	}
	/*==*/
.transferBlock{
	position: fixed;
	z-index:102;
	bottom: 0;
	width: 90%;
	height:200px;
	left: 50%;
	margin-left: -45%;
	background: #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	display: none;
}
.transferBlock_header{
	text-align: center;
	color: #F3961F;
	margin-top: 20px;
	font-size: 18px;
}
.transferBlock_main{
	margin: 30px 0;
	display: flex;
	justify-content: space-around;
}
.transferBlock_each{
	width: 40%;
}
.transferBlock_each h5{
	font-size: 20px;
	text-align: center;
}
.transferBlock_each h5 i{
	font-size: 30px;
	color:#F3961F;
}
.transferBlock_each p{
	font-size: 14px;
	color: #333333;
	line-height: 30px;
	text-align: center;
}
.close{
	background:#F3961F;
}
/*会员权益部分*/
.quanyi_main{
	width: 100%;
	padding-bottom: 40px;
}
.quanyi_main p{
	font-size: 14px;
	line-height: 20px;
	color: #333;
}
/*轮播*/
.banner img{
	width: 100%;
	height:205px;
}
		/*span点初始颜色*/
.swiper-pagination-bullet{
	background: #fff;
	opacity: 1;
}
		/*选中颜色*/
.swiper-pagination-bullet-active{
	background: #259C3F;
}
</style>
